<template>
  <div class="index">
    <!-- <NavBar/> -->
    <div class="dashboard user">
      <div>
        <div v-if="articleList.length" class="list" id="list_1" list>
          <ul>
            <li class="width-100" @click="$router.push('/articleDetails/'+item.viewPointId)" v-for="(item, index) in articleList" :key="index">
              <a v-if="item.imgUrl" href="javascript: void(0)" class="images" :title="item.title"><img :src="item.imgUrl"></a>
              <div class="info" :class="{'fr': item.imgUrl}">
                <a href="javascript:void(0)" class="title ftz18">{{item.title}}</a>
                <a href="javascript:void(0)" class="txt">{{item.summary}}</a>
                <div class="txt-tip">
                  <span>{{ item.updateTime | parseTime('{y}-{m}-{d}')}}</span>
                  <span class="line"></span>
                  <span>阅读量：{{item.hot}}</span>
                  <span class="line"></span>
                  <span :title="item.classifyName">分类：{{item.classifyName}}</span>
                </div>
              </div>
            </li>
          </ul>
          <!-- page -->
          <laypage :pageSize.sync="searchData.pageSize" :total="total" :pageNum.sync="searchData.pageNum" @changePage="getAttentionArticleList"></laypage>
          <!-- page end -->
        </div>
        <div v-if="!total&&!loading" style="padding: 40px;text-align: center;font-size: 16px;color: #999;">
          暂无内容
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Laypage from '@/components/laypage'
import { mapState } from 'vuex'
import * as api from '@/service/api'
export default {
  components: {
    Laypage
  },
  data () {
    return {
      viewData: {},
      total: null,
      tagView: 'recommend',
      curClassify: '',
      searchData: {
        pageSize: 10,
        pageNum: 1,
        status: '0',
        classifyId: ''
      },
      articleList: [],
      classifyList: [],
      loading: false
    }
  },
  created () {
    this.getAttentionArticleList()
    this.getClassifyList()
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  mounted () {
  },
  methods: {
    changeClassfy () {
      this.getAttentionArticleList()
      // this.searchData.status = key
      // this.getAttentionArticleList()
    },
    async getAttentionArticleList () {
      let res = await api.getAttentionArticleList({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.articleList = res.data.data.list
      } else {
        this.articleList = this.articleList.concat(res.data.data.list)
      }
      this.total = res.data.data.total
    },
    async getClassifyList () {
      let res = await api.getClassifyList()
      this.classifyList = res.data.data
    },
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      this.getAttentionArticleList()
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/user";
</style>
